<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">
      	<div><img :src="s1"/></div>
	      <p>首页</p>
      </router-link>
      <router-link to="/about">
      	<div><img :src="s2"/></div>
  			<p>推广</p>
      </router-link>
      <router-link to="/Shopping">
      	<div><img :src="s3"/></div>
      	<p>购物车</p>
      </router-link>
      <router-link to="/My">
      	<div><img :src="s4"/></div>
      	<p>我的</p>
      </router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
	import s1 from '@/assets/img/s1.png'
	import s2 from '@/assets/img/s2.png'
	import s3 from '@/assets/img/s3.png'
	import s4 from '@/assets/img/s4.png'
	export default{
		name:"app",
		data(){
			return {
				s1,
				s2,
				s3,
				s4
			}
		}
	}
</script>

<style scoped lang="scss">
@function p($px){
@return $px/2+px;
}

#app{
	overflow: hidden;
		#nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	  padding: 0px;
	  margin: 0;
	  text-align: center;
	  background: #323333;
		height: p(117);
		z-index: 10;
	  a {
	  	width: 25%;
	  	display: inline-block;
	    font-weight: bold;
	    color: #fff;
	    text-decoration: none;
	    margin-top: p(22);
	    div{
	    	width: p(43);
	    	height: p(40);
	    	margin: auto;
	    	img{
	    		width: 100%;
	    	}
	    }
	    p{
	    	font-size: p(24);
	    }
	  }
	}

}

</style>
